<!-- 
	预留 
	用于线下扫码结算
	目前 暂未走本流程
 -->
<template>
	<view class="content page">
		<status-bar title=' '></status-bar>
		<view class="consumeTopBox thmeBg" :style="{'--color': color}">
			<image class="titleImages" :src="staticUrl+'/images/jh_up/head.jpg'" mode="aspectFill"></image>
			<view class="name_of_shop">重庆南坪万达广场店</view>
		</view>
		<view class="moneyInput">
			<view class="inputBox flex-box align-center">
				<text>￥</text>
				<input type="number" v-model="inputNum" class="flex" value="" placeholder-class="pla"
					placeholder="消费金额" />
			</view>
		</view>
		<view class="payList">
			<view class="payItem">
				<label class="radio" @click="seleceRadio(1)">
					<image class="payTitleImg" :src="staticUrl+'/images/wx_pay_ico.png'" mode="widthFix"></image>
					<view class="payTitle">支付宝支付</view>
					<radio value="1" :checked="checkedSelect == 1?true:false" />
				</label>
			</view>
			<view class="payItem">
				<label class="radio" @click="seleceRadio(2)">
					<image class="payTitleImg" :src="staticUrl+'/images/money_tx.png'" mode="widthFix"></image>
					<view class="payTitle">账户余额</view>
					<radio value="2" :checked="checkedSelect == 2?true:false" />
				</label>
			</view>
			<view class="payItem">
				<label class="radio" @click="seleceRadio(3)">
					<image class="payTitleImg" :src="staticUrl+'/images/money_ye_mx.png'" mode="widthFix"></image>
					<view class="payTitle">账户积分</view>
					<radio value="3" :checked="checkedSelect == 3?true:false" />
				</label>
			</view>
		</view>
		<view class="coupon">
			<view class="no_coupon" v-if="noCoupon">无优惠券</view>
			<view class="selectCoupon" v-else>
				<view class="selectClick" v-if="clickSelect" @click="couponShow">点击选择优惠券</view>
				<view class="useCoupon" v-if="useCoupon">

					<view class="couponList">
						<view class="couponListBg" style="background:#2EA2EB"></view>
						<view class="circle" style="top: -10upx;"></view>
						<view class="circle" style="bottom: -10upx;"></view>
						<view class="right_top statre1" style="border-top-color:#666666">
							<text>抵用券</text>
						</view>
						<view class="couponContents">
							<view class="listLeft">
								<view class="couponTitle overflow" style="color:#666666">优惠券</view>
								<view class="couponCont overflow" style="color:#666666">2019/09/23至2020/09/23</view>
								<view class="couponCont overflow" style="color:#666666">优惠券描述</view>
							</view>
							<view class="listRight" style="color:#666666;border-left-color:#666666">
								￥<text>99</text>元
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="submitBtn" :style="{'--color': color}" :class="inputNum>0?'thmeBg':'active'" @click="submits">立即支付
		</view>
		<!-- 选择优惠券弹窗 -->
		<view class="contentsCoupon" v-show="couponBox">
			<view class="bottomClick" @click="bottomClick" @touchmove.stop></view>
			<view class="contentList">
				<view class="contentListBox">
					<view class="couponList" v-for="(item,index) in couponsData" :key="index"
						@click="_couponClick(item.couponId,item.title,item.price,item.priElse)">
						<view class="couponListBg" :style="{background:item.color}"></view>
						<view class="circle" style="top: -10upx;"></view>
						<view class="circle" style="bottom: -10upx;"></view>
						<view class="right_top statre1" :style="{'border-top-color':item.color}">
							<text>{{item.type==1?'抵用券':item.type==2?'折扣券':item.type==3?'兑换券':item.type==4?'免邮券':''}}</text>
						</view>
						<view class="couponContents">
							<view class="listLeft">
								<view class="couponTitle overflow" :style="{'color':item.color?item.color:''}">
									{{item.title}}
								</view>
								<view class="couponCont overflow" :style="{'color':item.color?item.color:''}">
									{{item.expiryDate}}
								</view>
								<view class="couponCont overflow" :style="{'color':item.color?item.color:''}">
									{{item.info}}
								</view>
							</view>
							<view class="listRight" :style="{
								'color':item.color?item.color:'',
								'border-left-color': item.color?item.color:''
								}">
								{{item.unit}}<text>{{item.price}}</text>{{item.priElse}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				staticUrl: this.staticUrl,
				inputNum: '',
				checkedSelect: 1,
				couponBox: false, //优惠券选择弹窗
				clickSelect: true, //点击选择优惠券
				noCoupon: false, //无优惠券
				useCoupon: false, //已选择使用的优惠券
				couponsData: [{
						color: "#0d4a75",
						company: "抖音抽奖测试券",
						couponId: "5ZJMA_efu9TDVIOLj54tgA==",
						expiryDate: "2019/09/23至2020/09/23",
						info: "抖音抽奖测试券",
						priElse: "元",
						price: 0.9,
						sort: "11600790400",
						state: "1",
						title: "抖音抽奖测试券",
						type: "1",
						unit: "￥",
					},
					{
						color: "#0d4a75",
						company: "抖音抽奖测试券",
						couponId: "5ZJMA_efu9TDVIOLj54tgA==",
						expiryDate: "2019/09/23至2020/09/23",
						info: "抖音抽奖测试券",
						priElse: "元",
						price: 0.9,
						sort: "11600790400",
						state: "1",
						title: "抖音抽奖测试券",
						type: "1",
						unit: "￥",
					},
					{
						color: "#0d4a75",
						company: "抖音抽奖测试券",
						couponId: "5ZJMA_efu9TDVIOLj54tgA==",
						expiryDate: "2019/09/23至2020/09/23",
						info: "抖音抽奖测试券",
						priElse: "元",
						price: 0.9,
						sort: "11600790400",
						state: "1",
						title: "抖音抽奖测试券",
						type: "1",
						unit: "￥",
					},
					{
						color: "#0d4a75",
						company: "抖音抽奖测试券",
						couponId: "5ZJMA_efu9TDVIOLj54tgA==",
						expiryDate: "2019/09/23至2020/09/23",
						info: "抖音抽奖测试券",
						priElse: "元",
						price: 0.9,
						sort: "11600790400",
						state: "1",
						title: "抖音抽奖测试券",
						type: "1",
						unit: "￥",
					},
					{
						color: "#0d4a75",
						company: "抖音抽奖测试券",
						couponId: "5ZJMA_efu9TDVIOLj54tgA==",
						expiryDate: "2019/09/23至2020/09/23",
						info: "抖音抽奖测试券",
						priElse: "元",
						price: 0.9,
						sort: "11600790400",
						state: "1",
						title: "抖音抽奖测试券",
						type: "1",
						unit: "￥",
					},
					{
						color: "#0d4a75",
						company: "抖音抽奖测试券",
						couponId: "5ZJMA_efu9TDVIOLj54tgA==",
						expiryDate: "2019/09/23至2020/09/23",
						info: "抖音抽奖测试券",
						priElse: "元",
						price: 0.9,
						sort: "11600790400",
						state: "1",
						title: "抖音抽奖测试券",
						type: "1",
						unit: "￥",
					},
				]
			}
		},

		onLoad() {
			that = this
			that.getPageData()
		},
		methods: {
			seleceRadio(i) {
				//选择支付方式
				that.checkedSelect = i
			},
			submits() {
				//提交支付
				if (that.inputNum == '') {
					return
				}
			},
			couponShow() { //打开优惠券选择列表
				if (that.inputNum == '') {
					uni.showToast({
						icon: "none",
						title: "请先输入金额",
						duration: 2000
					})
					return
				} else {
					that.couponBox = true
				}
			},
			bottomClick: function() {
				//点击空白处关闭优惠券选择列表
				that.couponBox = false
				that.couponS = false
			},
			_couponClick: function(couponId, couponTitle, conponMoney, couponInfo) {
				//点击优惠券，即选择使用
				that.clickSelect = false //关闭点击选择优惠券按钮
				that.useCoupon = true //打开已选择优惠券
				that.couponBox = false //关闭优惠券列表弹窗
			},
			getPageData() {
				that.$http.post({
					url: '/SRA_memberRecharge/storeConsumption',
					data: {
						VeriCode: that.bid,
						vId: that.vid,
						shop_id: '68',
					}
				}).then(res => {
					if (res.code == 100) {

					} else {
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 2000
						})
					}
				})
			}
		},
		computed: {
			...mapState(['vid', 'bid', 'color'])
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		font-size: 28upx;
		color: #333333;
	}

	.consumeTopBox {
		width: 100%;
		padding: 30upx;
		text-align: center;
		padding-top: 0;
	}

	.titleImages {
		width: 120upx;
		height: 120upx;
		border-radius: 100%;
	}

	.name_of_shop {
		width: 100%;
		text-align: center;
		color: #FFFFFF;
		margin-top: 20upx;
	}

	.moneyInput {
		width: 100%;
		padding: 30upx;
		border-bottom: 1px solid #e6e6e6;
		margin-bottom: 30upx;
		background: #FFFFFF;
	}

	.inputBox {
		width: 100%;
		border: 1px solid #e6e6e6;
		color: #666666;
		height: 88rpx;
		padding: 0 30rpx;

		text {
			margin-right: 10rpx;
			font-size: 26rpx;
		}

		input {
			font-size: 30rpx;
			font-weight: bold;
		}

		.pla {
			color: #909090;
			font-size: 24rpx;
			font-weight: normal;
		}
	}

	.payList {
		width: 100%;
		background: #FFFFFF;
		border-top: 1px solid #e6e6e6;
	}

	.payItem {
		width: 100%;
		border-bottom: 1px solid #e6e6e6;
		padding: 30upx;
	}

	.radio {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.payTitle {
		width: 80%;
		line-height: 48upx;
	}

	.payTitleImg {
		width: 48upx;
		height: 48upx;
	}

	.coupon {
		width: 100%;
	}

	.no_coupon {
		width: 100%;
		text-align: center;
		color: #878787;
		line-height: 100upx;
	}

	.submitBtn {
		width: calc(100% - 60upx);
		margin-left: 30upx;
		padding: 30upx 0;
		text-align: center;
		border-radius: 10upx;
		margin-top: 30upx;
		color: #FFFFFF;
	}

	.active {
		background: #DEDEDE;
		color: #949494;
	}

	.selectCoupon {
		width: 100%;
		background: #FFFFFF;
		padding: 30upx;
	}

	.selectClick {
		width: 50%;
		margin-left: 25%;
		text-align: center;
		line-height: 100upx;
		color: #2EA2EB;
		border: 1px dashed #2EA2EB;
	}

	/* ============================================================================================================================= */
	.useCoupon .circle {
		background: #FFFFFF;
	}

	.useCoupon .couponList {
		margin-bottom: 0;
	}

	.contentsCoupon {
		position: fixed;
		width: 100%;
		height: 100%;
		/* background: #FFFFFF; */
		z-index: 1000;
		top: 0%;
		left: 0;
		transition: top 0.2s;
	}

	.selectShow {
		top: 0;
	}

	.couponTip {
		/* margin-bottom: 30upx; */
		text-align: left;
		color: #999999;
	}

	.bottomClick {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 1110;
		top: 0;
		left: 0;
	}

	.contentList {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 48%;
		border-radius: 10upx 10upx 0 0;
		background: #F8F8F8;
		width: 100%;
		overflow-y: auto;
		z-index: 1111;
		padding: 30upx;
	}

	.contentListBox {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.couponList {
		width: 100%;
		margin-bottom: 20upx;
		background: #FFFFFF;
		border-radius: 10upx;
		/* padding: 20upx; */
		height: 160upx;
		overflow: hidden;
		position: relative;
		box-shadow: 0 0 2upx 1upx rgba(240, 240, 240, 0.5);
	}

	.listLeft {
		width: 380upx;
		height: 100%;
		float: left;
		line-height: 40upx;
	}

	.listRight {
		width: 140upx;
		height: 100%;
		float: right;
		border-left: 2upx dashed #DCDCDC;
		line-height: 120upx;
	}

	.circle {
		width: 20upx;
		height: 20upx;
		border-radius: 100%;
		background: #F4F4F4;
		position: absolute;
		right: 150upx;
		z-index: 5;
	}

	/* .circle:nth-child(1){
		top: -10upx;
	}
	.circle:nth-child(2){
		bottom: -10upx;
	} */
	.couponTitle {
		width: 90%;
		color: #333333;
		font-size: 32upx;
		font-weight: bold;
	}

	.overflow {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.couponCont {
		margin-top: 4upx;
		color: #999999;
		font-size: 20upx;
	}

	.listRight {
		color: #FF634C;
		text-align: center;
		font-size: 20upx;
	}

	.listRight text {
		font-size: 40upx;
		font-weight: bold;
		margin: 0 5upx;
	}

	.closecoupon {
		width: 66upx;
		height: 66upx;
		position: absolute;
		z-index: 10000;
		top: 100%;
		left: 50%;
		margin-left: -33upx;
		margin-top: 60upx;
	}

	.right_top {
		width: 0;
		height: 0;
		color: #FFFFFF;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
		border-top: 80upx solid #EC612A;
		border-left: 80upx solid transparent;
	}

	.right_top text {
		position: absolute;
		transform: rotate(45deg);
	}

	.statre text {
		left: -48upx;
		top: -70upx;
		font-size: 24upx;
	}

	.statre1 text {
		left: -50upx;
		top: -62upx;
		font-size: 16upx;
	}

	.couponListBg {
		width: 100%;
		height: 100%;
		opacity: 0.5;
		position: absolute;
		z-index: 1;

	}

	.couponContents {
		padding: 20upx;
		height: 100%;
	}
</style>